<template>
    <div class="topic">
        <ul>
            <li v-for="item in dataArr" :key="item.id">
                <img v-lazy="item.scene_pic_url" alt="">
                <h3>{{ item.title }}</h3>
                <p>{{ item.subtitle }}</p>
                <span>{{item.price_info | formatMoney }}</span>
            </li>
        </ul>
         <!-- 分页 -->
        <van-pagination v-model="page" :page-count="pageCount" mode="simple" @change="changePage" />
    </div>
</template>

<script>
// 引入专题页接口
import { getTopicData } from '@/utils/http'
export default {
    name: "Topic",
    props: [""],
    data() {
        return {
            page: 1,  // 默认的当前页
            size: 10,  // 默认的每页的数据条数
            dataArr:[], // 页面当前数据
            pageCount:0,
        };
    },
    created() {
        // 初始化请求数据
        this.getData()
    },
    methods: {
        changePage(){
            // console.log(this.page);
            // 重新请求数据
            this.getData();
        },
        getData(){
            getTopicData({
                page: this.page,
                size: this.size,
            }).then((res)=>{
                console.log(res);
                const {data,currentPage,totalPages}=res.data.data;
                this.dataArr = data;
                this.page = currentPage;
                this.pageCount = totalPages;
                document.documentElement.scrollTop = 0;
            })
        }
    },
};
</script>
<style lang="less" scoped>
.topic{
    img{
        width:100%;
        display: block;
    }
    h3{
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        color: black;
    }
    p{
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color:#1f1f1f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    span{
        display: block;
        height: 50px;
        line-height: 50px;
        color: #9b0000;
        font-size: 16px;
        margin-bottom: 30px;
    }
    text-align: center;
    padding-bottom: 80px;
    // 修改vant 中的样式 如何修改ui组件设置的样式
    // 如果要修改ui组件库的样式,一般的话,你的权重不够,达不到修改效果, 可以使用深度选择器
    /deep/.van-pagination__page-desc{
        display: none;
    }
}
</style>